<template>
	<view class="container">
	  <!-- 头部 -->
	    <header>
	        <h1>人才市场可视化</h1>
	        <view class="clock">当前时间: 12:34:56</view>
	    </header>
	
	
	    <!-- 主体 -->
	    <view class="mainbox">
	        <!-- 左边列 -->
	        <view class="column">
	            <view class="panel">
	                <h1>柱形图</h1>
	                <view id="panel1-chart" class="panel-chart"></view>
	                <view class="panel-footer"></view>
	            </view>
	            <view class="panel">
	                <h1>饼状图</h1>
	                <view id="panel2-chart" class="panel-chart"></view>
	                <view class="panel-footer"></view>
	            </view>
	            <view class="panel">
	                <h1>柱形图</h1>
	                <view id="panel3-chart" class="panel-chart"></view>
	                <view class="panel-footer"></view>
	            </view>
	        </view>
	
	        <!-- 中间列 -->
	        <!-- 中间上半部分的数字 -->
	        <view class="column">
	            <view class="num">
	                <ul class="num-num">
	                    <li id="xuqiu">12345</li>
	                    <li id="gongying">54321</li>
	                </ul>
	                <ul class="num-title">
	                    <li>市场需求人数</li>
	                    <li>市场供应人数</li>
	                </ul>
	            </view>
	
	            <!-- 中间下半部分的地图 -->
	            <view id="map" class="map">
	                <view id="map-earth" class="map-earth"></view>
	                <view class="map-grid"></view>
	                <view class="map-light"></view>
	                <view id="map-chart" class="map-chart"></view>
	            </view>
	        </view>
	
	
	
	        <!-- 右边列 -->
	        <view class="column">
	            <view class="panel">
	                <h1>柱形图</h1>
	                <view id="panel4-chart" class="panel-chart"></view>
	            </view>
	            <view class="panel">
	                <h1>柱形图</h1>
	                <view id="panel5-chart" class="panel-chart"></view>
	            </view>
	            <view class="panel">
	                <h1>柱形图</h1>
	                <view id="panel6-chart" class="panel-chart"></view>
	            </view>
	        </view>
	    </view>

	</view>
</template>

<script>
	export default {
		data() {
		
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="less">
	// 全局配置
	* {
	    margin: 0;
	    padding: 0;
	    box-sizing:border-box;
	}
	
	@font-face {
	    font-family: myfont;
	    src: url(../../static/fonts/DS-DIGIT.TTF);
	}
	
	@earth-size: 700upx;
	
	
	.container {
	    background: url(../../static/images/bg.jpg) center top no-repeat;
	    line-height: 1.15;
	
	    // 头部
	    header {
	        height: 200upx;
	        background: url(../../static/images/head_bg.png) center top no-repeat;
	        background-size: 100% 100%;
	
	        // 标题
	        h1 {
	            color: white;
	            font-size: 76upx;
	            text-align: center;
	            line-height: 80upx;
	        }
	
	        // 时间模块clock： 
	        // - 定位：绝对定位  
	        // - 右侧：30像素  
	        // - 顶部：0  
	        // - 行高：80像素
	        // - 字体大小：20像素
	        // - 字体颜色：rgba(255, 255, 255, 0.7)  
	        .clock {
	            color:rgba(255, 255, 255, 0.7);
	            font-size: 40upx;
	            line-height: 80upx;
	            position: absolute;
	            right: 10px;
	            top: 0;
	        }
	    }
	
	    // 主体
	    .mainbox {
	        // min-width: 1024px;
	        max-width: 1920px;
	        margin: 0 auto;
	        padding: 20upx 20upx 0;
	        display: flex;
	
	        // 列： 共3列
	        .column {
	            color: aliceblue;
	            flex: 3;            // 3列, 每列占3份
	        }
	
	        .column:nth-child(2) {  // 单独设置第2列, 占5份
	            flex: 5;
	        }
	
	        // 6个面板
	        .panel {
	            
	    // 高度: 310px
	    // 边框: 1像素的 1px solid rgba(25, 186, 139, 0.17)
	    // 背景图片: line.jpg, 背景色透明度：rgba(255, 255, 255, 0.03)
	    // 内边距：上为 0 左右 15px 下为 40px
	    // 下外边距：15px
	    // 上面两个角：大小为 10px 线条为 2px solid #02a6b5
	    // 下面两个角： 参照上面两个角的做法
	    // 标题：高度为48px，文字颜色为白色，文字大小为20px
	    // 图表：高度240px
	            height: 440upx;
	            // background-color: aqua;
	            border: 1px solid rgba(25, 186, 139, 0.17);
	            background: url(../../static/images/line.png);
	            padding: 20upx 80upx;
	            margin-left: 100upx;
	            margin-bottom: 30upx;
	
	            position: relative;
	
	            &::before {
	                content: "";
	                position: absolute;
	                top: 0;
	                left: 0;
	                width: 10px;
	                height: 10px;
	                border-left: 2px solid #02a6b5;
	                border-top: 2px solid #02a6b5;
	            }
	
	            &::after {
	                content: "";
	                position: absolute;
	                top: 0;
	                right: 0;
	                width: 10px;
	                height: 10px;
	                border-right: 2px solid #02a6b5;
	                border-top: 2px solid #02a6b5;
	            }
	
	            h1 {
	                height: 96upx;
	                color: white;
	                font-size: 40upx;
	                
	                display: flex;
	                justify-content: center;
	                align-items: center;
	            }
	
	            .panel-chart {
	                height: 480upx;
	                // border: solid 1px red;
	            }
	
	            .panel-footer {
	                // border: solid 1px red;
	                position: absolute;
	                left: 0;
	                bottom: 0;
	                width: 100%;
	
	                &::before {
	                    content: "";
	                    position: absolute;
	                    bottom: 0;
	                    left: 0;
	                    width: 10px;
	                    height: 10px;
	                    border-left: 2px solid #02a6b5;
	                    border-bottom: 2px solid #02a6b5;
	                }
	
	                &::after {
	                    content: "";
	                    position: absolute;
	                    bottom: 0;
	                    right: 0;
	                    width: 10px;
	                    height: 10px;
	                    border-right: 2px solid #02a6b5;
	                    border-bottom: 2px solid #02a6b5;
	                }
	            }
	
	        }
	
	        // 中间上半部分的数字
	        .num {
	            background-color: rgba(101, 132, 226, 0.1);
	            padding: 30upx;
	            border: 1px solid rgba(25, 186, 139, 0.17);
	            margin-left: 20upx;
	            margin-right: 20upx;
	
	            .num-num {
	                display: flex;
	                li {
	                    list-style: none;
	                    flex: 1;
	                    display: flex;
	                    justify-content: center;
	                    align-items: center;
	
	                    height: 160upx;
	                    font-size: 140upx;
	                    color: #ffeb7b;
	                    font-family: myfont;
	                }
	            }
	
	            .num-title {
	                display: flex;
	                li {
	                    flex: 1;
	                    list-style: none;
	                    display: flex;
	                    justify-content: center;
	                    align-items: center;
	
	                    height: 80upx;
	                    color:rgba(255, 255, 255, 0.7) ;
	                    font-size: 36upx;
	                    padding-top: 20upx;
	                }
	            }
	        }
	
	        // 中间下半部分的地图
	        .map {
	            height: 1300upx;
	            width: 100%;
	            // border: solid 1px lightgray;
	
	            position: relative;
	            .map-earth {
	                height: @earth-size;
	                width: @earth-size;
	                background: url(../../static/images/map-earth.png);
	                background-size: 100% 100%;
	                // border: solid 1px red;
	                position: absolute;
	                top: 50%;
	                left: 50%;
	                transform: translate(-50%, -50%);
	            }
	
	            .map-grid {
	                height: @earth-size * 1.3;
	                width: @earth-size * 1.3;
	                background: url(../../static/images/lbx.png);
	                background-size: 100% 100%;
	                // border: solid 1px red;
	                position: absolute;
	                top: 50%;
	                left: 50%;
	                transform: translate(-50%, -50%);
	                animation: map-grid-rotate 20s linear infinite;
	            }
	
	            @keyframes map-grid-rotate {
	                from {
	                    transform: translate(-50%, -50%) rotate(0deg);
	                }
	                to {
	                    transform: translate(-50%, -50%) rotate(360deg);
	                }
	            }
	
	            .map-light {
	                height: @earth-size * 1;
	                width: @earth-size * 1;
	                background: url(../../static/images/jt.png);
	                background-size: 100% 100%;
	                // border: solid 1px red;
	                position: absolute;
	                top: 50%;
	                left: 50%;
	                transform: translate(-50%, -50%);
	                animation: map-light-rotate 10s linear infinite;
	            }
	
	            @keyframes map-light-rotate {
	                from {
	                    transform: translate(-50%, -50%) rotate(360deg);
	                }
	                to {
	                    transform: translate(-50%, -50%) rotate(0deg);
	                }
	            }
	
	            position: relative;
	            .map-chart {
	                position: absolute;
	                top: 0;
	                left: 0;
	                width: 100%;
	                height: 1620upx;
	            }
	        }
	    }
	}
	

</style>
